<template>
    <section class="article">
        <h1 class="heading">文章列表</h1>
        <div class="box-continue">
            <div class="box" v-for="item in articlesData" :key="item.id">
                <img :src="item.thumbnail">
                <div class="icons">
                    <div style="display: flex;">
                        <span>
                            <UiDate></UiDate> <a>{{ item.createTime }}</a>
                        </span>
                        <span>
                            <AnOutlinedUser></AnOutlinedUser> <a>{{ item.username }}</a>
                        </span>
                    </div>
                </div>
                <h3>{{ item.title }}</h3>
                <p>{{ item.summary }}</p>
                <a class="btn" @click="handleclick(item.id)">read more</a>
            </div>
        </div>
        <div class="page">
            <el-pagination v-model:current-page="ListDto.pageNum" size="small" background layout="prev, pager, next"
                v-model:page-size="ListDto.pageSize" @current-change="handleCurrentChange" :total="total"
                class="mt-4" />
        </div>
    </section>

</template>



<script setup>
import { UiDate, AnOutlinedUser } from '@kalimahapps/vue-icons';
import { userArticlesAPI } from '@/api'
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const ListDto = reactive({
    pageNum: 1,
    pageSize: 6,
})
const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initCityList()
}
let total = ref(0)
let articlesData = ref()

const initarticles = async () => {
    const res = await userArticlesAPI(ListDto)
    articlesData.value = res.rows
    total.value = Number(res.total)
}

const handleclick = (val) => {
    router.push({
        path: "/layout/articledetail",
        query: {
            articleId: val
        }
    }).catch(err => { })
}

initarticles()
</script>


<style lang="scss" scoped>
.article {
    font-size: 80%;
    position: relative;
    width: 100%;
    padding: 3rem 9%;
}

.heading {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 4rem;
    margin-top: .5rem;
}

.article .box-continue {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 2rem;
}

.article .box-continue .box {
    text-align: center;
    overflow: hidden;
    padding: 1.5rem;
    flex: 1 1 32rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    position: relative;
}

.article .box-continue img {
    height: 26rem;
    width: 100%;
    object-fit: cover;
}

.article .box-continue .icons {
    background: #222;
    display: inline-block;
    border-radius: .5rem;
    padding: .5rem;
    position: relative;
    top: -2.5rem;
}

.article .box-continue .icons span {
    display: flex;
    font-size: 1.8rem;
    color: white;
    margin: 1rem;
    align-items: center;
}


.article .box-continue .icons a {
    color: white;
    margin-left: .6rem;
}

.article .box-continue h3 {
    margin-top: -1rem;
    font-size: 2.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article .box-continue p {
    font-size: 1.4rem;
    line-height: 2.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn {
    border: .2rem solid #222;
    display: inline-block;
    cursor: pointer;
    margin-top: 1rem;
    padding: 1rem 2rem;
    background: none;
    font-size: 1.6rem;
    color: #222;
}

.btn:hover {
    color: #eee;
    background-color: #222;
}

.page {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>